<template>
	<el-card class="box-card">
		<template #header>
			<div class="flex align-center justify-between">
				<div>
					<div>组件列表</div>
					<small style="font-size: 10px; color: #bbbbbb">点击组件，添加至页面</small>
				</div>
				<el-button type="primary" @click="clearHandler">清空</el-button>
			</div>
		</template>
		<el-row :gutter="20">
			<el-col
				@click="handleComponent(item)"
				:span="12"
				v-for="item in componentsList"
				:key="item.type"
			>
				<el-card shadow="hover" :body-style="{ padding: '15px 8px', cursor: 'pointer' }">
					<div class="flex align-center">
						<IconFont
							class="mr-1"
							style="color: #1890ff; font-size: 20px"
							:iconName="item.icon"
						></IconFont>
						<span>{{ item.title }}</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-card>
</template>

<script lang="javascript">
	import { ref } from 'vue';
	import { useFactoryStore } from '@/hooks/useFactoryStore';
	import { SHOP_DECORATION_ACTION, CLEAR_SHOP_DECORATION } from '@/utils/Const';
	import { uuid } from '@/utils/Tools';
	export default {
		setup () {
			let { action, mutation } = useFactoryStore({
				namespaced : 'shopDecoration',
				actionsMethod : [SHOP_DECORATION_ACTION],
				mutationsMethod : [CLEAR_SHOP_DECORATION]
			});
			let componentsList = ref([
				{
					componentName : 'HyNavBar',
					icon : '3zhuangtailan',
					title : '导航栏',
					defaultProps : {
						title : '页面标题',
						isBack : true
					}
				},
				{
					componentName : 'HySearch',
					icon : 'sousuo',
					title : '搜索框',
					defaultProps : {
						placeholder : '请输入搜索关键词'
					}
				}
			]);

			let handleComponent = (params) => {
				let row = {
					id : uuid(),
					ismobile : true, // 移动端
					componentName : params.componentName, // 组件名称
					defaultProps : params.defaultProps // 组件默认属性
				};
				action[SHOP_DECORATION_ACTION](row);
			};

			let clearHandler = () => {
				mutation[CLEAR_SHOP_DECORATION]({
					ismobile : true
				});
			};
			return {
				clearHandler,
				handleComponent,
				componentsList
			};
		}
	};
</script>

<style lang="scss" scoped>
	.box-card {
		width: 400px;
	}
</style>
